<template>
  <div class="groupDetails">
    <div class="mains_contain">
      <div class="back" @click="toBack">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </div>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="hTitle">
              <span>分组名称： {{ groupRow.name }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="hTitle">设备总数： {{ pagination.total }}</div>
          </div>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <div style="font-size: 16px">设备列表</div>
      </el-divider>
      <div style="display:flex;align-items: center;
       justify-content: space-between;">
        <div>
          <el-button type="primary" @click="onAdd" size="mini">关联设备</el-button>
          <el-button type="danger" size="mini" @click="unbindGroup(bull, 1)" icon="el-icon-delete">批量解除设备</el-button>
        </div>
        <div style="display:flex;align-items: center">
          <div>设备名称：</div>
          <el-input placeholder="请输入内容" clearable size="small" style="width: 200px;margin-right:10px" v-model="searchForm.name" class="input-with-select">
          </el-input>
          <el-button slot="append" type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="mains_contain" style="margin-top:20px">
      <div class="tabTitle">已关联设备</div>
      <el-table :data="tableData" ref="tableData" style="width: 100%; margin-top: 10px" fit @selection-change="onSelectionChange" :max-height="maxHeight" border stripe size="mini"
        highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }" :row-key="bindKey">
        <!-- <el-table-column label="已关联设备" header-align="center"> -->
        <!-- <template slot="header" slot-scope="scope">
          <div style="font-size: 16px; line-height: 48px">已关联设备</div>
        </template> -->
        <el-table-column type="selection" width="40" fixed="left" :reserve-selection="true" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="tenantTxt" label="租户名称" />
        <el-table-column prop="nodeId" label="设备唯一标识码" />
        <el-table-column prop="nodeType" label="节点类型">
          <template slot-scope="scope">
            <span v-if="scope.row.nodeType == 'ENDPOINT'" style="color: #0066ff">终端设备</span>
            <span v-if="scope.row.nodeType == 'GATEWAY'" style="color: #0066ff">网关设备</span>
            <span v-if="scope.row.nodeType == 'UNKNOW'" style="color: #0066ff">未知设备</span>
          </template>
        </el-table-column>
        <el-table-column prop="protocolType" label="协议类型" />
        <el-table-column prop="status" label="设备状态">
          <template slot-scope="scope">
            <span style="color:#67C23A" v-if="scope.row.status == 'ONLINE'">在线</span>
            <span style="color:#F56C6C" v-if="scope.row.status == 'OFFLINE'">离线</span>
            <span style="color:#F56C6C" v-if="scope.row.status == 'WARNING'">告警</span>
            <span style="color:#E6A23C" v-if="scope.row.status == 'INACTIVE'">未注册</span>
          </template>
        </el-table-column>
        <el-table-column prop="mute" label="设备是否冻结">
          <template slot-scope="scope">
            <span style="color:#F56C6C" v-if="scope.row.mute == 'TRUE'">是</span>
            <span style="color:#67C23A" v-if="scope.row.mute == 'FALSE'">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="110">
        </el-table-column>
        <!-- </el-table-column> -->
      </el-table>
      <div style="text-align: right">
        <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>
    <el-dialog :title="cirTitle" :visible.sync="dialogVisible" width="80%" top="5%" destroy-on-close @closed="onClosed" :close-on-click-modal="false">
      <el-form :inline="true" label-position="left" :model="dialogSearchForm" size="small" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="dialogSearchForm.name" clearable placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="dialogSearchForm.nodeId" clearable placeholder="请输入设备标识" />
        </el-form-item>
        <el-form-item label="节点类型">
          <el-select v-model="dialogSearchForm.nodeType" clearable placeholder="请选择节点类型">
            <el-option label="终端设备" value="ENDPOINT"></el-option>
            <el-option label="网关设备" value="GATEWAY"></el-option>
            <el-option label="未知设备" value="UNKNOW"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="同步时间">
          <el-date-picker v-model="searchForm.createTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="dialogSearch" size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dialogTableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="500" border stripe size="mini" highlight-current-row
        :header-cell-style="{ background: '#e5e5e5', color: '#000' }" :row-key="bindKey">
        <el-table-column label="已关联设备" header-align="center" align="center">
          <template slot="header" slot-scope="scope">
            <h2 style="color: red">未关联设备</h2>
          </template>
          <el-table-column type="selection" width="40" :reserve-selection="true" > </el-table-column>
          <el-table-column prop="name" label="设备名称" align="center"/>
          <el-table-column prop="tenantTxt" label="租户名称" align="center"/>
          <el-table-column prop="nodeId" label="设备唯一标识码" align="center"/>
          <el-table-column prop="nodeType" label="节点类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.nodeType == 'ENDPOINT'" style="color: #0066ff">终端设备</span>
              <span v-if="scope.row.nodeType == 'GATEWAY'" style="color: #0066ff">网关设备</span>
              <span v-if="scope.row.nodeType == 'UNKNOW'" style="color: #0066ff">未知设备</span>
            </template>
          </el-table-column>
          <el-table-column prop="protocolType" label="协议类型" align="center"/>
          <el-table-column prop="status" label="设备状态" align="center">
            <template slot-scope="scope">
              <span style="color:#67C23A" v-if="scope.row.status == 'ONLINE'">在线</span>
              <span style="color:#F56C6C" v-if="scope.row.status == 'OFFLINE'">离线</span>
              <span style="color:#F56C6C" v-if="scope.row.status == 'WARNING'">告警</span>
              <span style="color:#E6A23C" v-if="scope.row.status == 'INACTIVE'">未注册</span>
            </template>
          </el-table-column>
          <el-table-column prop="mute" label="设备是否冻结" align="center">
            <template slot-scope="scope">
              <span style="color:#F56C6C" v-if="scope.row.mute == 'TRUE'">是</span>
              <span style="color:#67C23A" v-if="scope.row.mute == 'FALSE'">否</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="110" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <pagination v-show="dialogPagination.total > 0" :limit.sync="dialogPagination.pageSize" :page.sync="dialogPagination.page" :total="dialogPagination.total" @pagination="dialogSearch" />
      </div>
      <div style="text-align: right">
        <el-button type="primary" @click="handleSave" size="small">保存</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/link/device";
import * as deviceGroup from "@/api/link/deviceGroup";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeName: "first",
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      searchForm: {},
      dialogSearchForm: {},
      groupRow: {},
      cirTitle: "关联设备",
      dialogVisible: false,
      multipleSelection: [],
      multipleSelectionOther: [],
      dialogTableData: [],
      dialogPagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      isPage: ''
    };
  },
  //监听属性 类似于data概念
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 340;
    },
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.search();
    console.log(this.$route.query, "this.$route.query====");
    this.groupRow = Object.assign({}, this.$route.query);
  },
  methods: {
    toBack() {
      this.$router.push({ path: '/groupList', query: { pages: this.$route.query.page ? this.$route.query.page : 1 } })
    },
    bindKey(row) {
      return row.id;
    },
    onClosed() {
      this.dialogSearchForm = {};
    },
    onAdd() {
      this.dialogVisible = true;
      this.dialogSearch();
    },
    onSelectionChange(val) {
      this.multipleSelectionOther = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    search() {
      const p = Object.assign(
        { groupId: this.$route.query.id },
        this.searchForm,
        this.pagination
      );
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    dialogSearch() {
      const p = Object.assign(
        { groupId: this.groupRow.id },
        { tenantId: this.groupRow.tenantId },
        this.dialogPagination,
        this.dialogSearchForm
      );
      deviceGroup.pageByGroupId(p).then((resp) => {
        this.dialogTableData = resp.data.records;
        this.dialogPagination = {
          total: resp.data.total,
          page: resp.data.current,
          pageSize: resp.data.size,
        };
      });
    },
    getPageList() {
      this.search();
    },
    getDialogPageList() {
      this.dialogSearch();
    },
    unbindGroup(row, index) {
      if (!this.multipleSelectionOther.length) {
        this.$message({
          message: "请选择设备进行解绑",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将取消分组和设备的关联, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var nodeIds = [];
          this.multipleSelectionOther.map((item) => {
            nodeIds.push(item.nodeId);
          });
          var p = {
            groupId: this.groupRow.id,
            nodeIds: nodeIds.join(","),
          };
          deviceGroup.unbind(p).then((resp) => {
            this.$message({
              message: "解绑成功",
              type: "success",
            });
            this.$refs.tableData.clearSelection()
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSave() {
      if (!this.multipleSelection.length) {
        this.$message({
          message: "请选择设备进行绑定",
          type: "warning",
        });
        return;
      }
      var nodeIds = [];
      this.multipleSelection.map((item) => {
        nodeIds.push(item.nodeId);
      });
      var p = {
        groupId: this.groupRow.id,
        nodeIds: nodeIds.join(","),
        tenantId: this.groupRow.tenantId,
      };
      deviceGroup.saveBatch(p).then((resp) => {
        this.$message({
          message: "关联成功",
          type: "success",
        });
        this.search();
        this.dialogVisible = false;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.groupDetails {
  padding: 20px;
}
.tabTitle {
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 18px;
  background: #fff;
  border-radius: 5px 5px 0 0;
}
</style>
